<template>
  <el-card class="w-full pt-[5px] pb0">
    <el-form :model="searchForm" class="mt-[20px]" label-width="110px" ref="searchFormRef">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="姓名" prop="expertName">
            <el-input v-model="searchForm.expertName" placeholder="姓名" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工作单位" prop="unitName">
            <el-input v-model="searchForm.unitName" placeholder="工作单位" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="最后学位" prop="lastDegree">
            <CustomTreeSelect
              :isFetch="false"
              :dataList="degreeList"
              v-model="searchForm.lastDegree"
              placeholder="最后学位"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <div class="flex justify-end">
            <el-button type="primary" @click="searchFormOpen = !searchFormOpen"
              >更多
              <el-icon color="#fff">
                <CaretTop v-show="searchFormOpen" />
                <CaretBottom v-show="!searchFormOpen" />
              </el-icon>
            </el-button>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-show="searchFormOpen">
        <el-col :span="6">
          <el-form-item label="统计归属" prop="belongs">
            <CustomTreeSelect
              paramsName="学科门类（学位）"
              placeholder="统计归属"
              v-model="searchForm.belongs"
              labelKey="valueColumn"
              valueKey="codeColumn"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="职称" prop="title">
            <CustomTreeSelect
              :isFetch="false"
              :dataList="applierTitleList"
              v-model="searchForm.title"
              valueKey="id"
              labelKey="label"
              placeholder="职称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="专家来源" prop="source">
            <CommonSelect
              paramsName="专家来源"
              placeholder="专家来源"
              v-model="searchForm.source"
              valueKey="code"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="职工号" prop="account">
            <el-input v-model="searchForm.account" placeholder="职工号" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="一级学科" prop="subjectId">
            <CustomTreeSelect
              :isFetch="false"
              :dataList="firstSubjectList"
              placeholder="一级学科"
              v-model="searchForm.subjectId"
              valueKey="id"
              labelKey="label"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别" prop="sexId">
            <CommonSelect
              paramsName="人员-性别(男女)"
              placeholder="性别"
              v-model="searchForm.sexId"
              valueKey="code"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="最后学历" prop="eduLevel">
            <CustomTreeSelect
              paramsName="学历"
              placeholder="最后学历"
              v-model="searchForm.eduLevel"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="荣誉称号" prop="honorTitleId">
            <CustomTreeSelect
              paramsName="荣誉称号"
              placeholder="荣誉称号"
              v-model="searchForm.honorTitleId"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="searchForm.mobile" placeholder="手机号码" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="研究方向" prop="researchField">
            <el-input v-model="searchForm.researchField" placeholder="研究方向" clearable />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <el-card class="w-full pt-[5px] mt-[10px]">
    <div class="mb-[20px]">
      <el-button @click="handleSendMessageMul">
        <el-icon class="mr-[5px]"><Bell /></el-icon>发送通知
      </el-button>
      <el-button @click="toPrevPage">返回</el-button>
    </div>
    <el-table :data="tableData" class="w-full" stripe v-loading="loading" ref="tableRef">
      <el-table-column type="selection" width="40" />
      <el-table-column label="姓名">
        <template #default="{ row }">
          <el-link type="primary" @click="handleViewPerson(row.expertId)" v-if="row.expertId">{{
            row.expertName
          }}</el-link>
          <span v-else>{{ row.expertName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="unidId" label="工作单位" />
      <el-table-column label="职称">
        <template #default="{ row }">
          <CommonTreeLabel :value="row.titleId" :dataList="applierTitleList" />
        </template>
      </el-table-column>
      <el-table-column label="最后学位">
        <template #default="{ row }">
          <CommonLabel :value="row.degreeId" :dataList="degreeList" />
        </template>
      </el-table-column>
      <el-table-column label="一级学科">
        <template #default="{ row }">
          <CommonTreeLabel :value="row.subjectId" :dataList="firstSubjectList" />
        </template>
      </el-table-column>
      <el-table-column label="评审进度">
        <template #default="{ row }">
          <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="parseFloat(((row.finishCount / row.totalCount) * 100).toFixed(1))"
          />
        </template>
      </el-table-column>
      <el-table-column label="评审数/分配数">
        <template #default="{ row }"> {{ row.finishCount }} / {{ row.totalCount }} </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="350" align="center">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            plain
            @click="handleViewProject(row.expertId, row.expertName)"
          >
            查看评审项目
          </el-button>
          <el-button type="primary" size="small" plain @click="handleSendMessage(row)"
            >发送通知</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-[20px] flex justify-end">
      <el-pagination
        v-bind="pagination"
        @update:current-page="currentChange"
        @update:page-size="sizeChange"
      />
    </div>
  </el-card>
  <ViewProjectModal ref="viewProjectModalRef" />
  <SendMessageModal ref="sendMessageModalRef" />
  <ExpertView ref="expertViewModalRef" />
</template>

<script setup>
import useTable from "@/hooks/useTable";
import { getList} from "@/api/project/xj/xmps/expert";
import CommonLabel from "@/views/project/components/CommonLabel.vue";
import CommonTreeLabel from "@/views/project/components/CommonTreeLabel.vue";
import CustomTreeSelect from "@/views/project/components/CustomTreeSelect.vue";
import CommonSelect from "@/views/project/components/CommonSelect.vue";
import ViewProjectModal from "./components/ViewProjectModal";
import SendMessageModal from "./components/SendMessageModal";
import ExpertView from "@/views/project/components/ExpertView.vue";
import useCommonFetch from "@/hooks/useCommonFetch";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const id = route.query.id;
const planId = route.query.planId;
const degreeList = useCommonFetch("学位");
const applierTitleList = useCommonFetch("职称");
const firstSubjectList = useCommonFetch("一级学科");
const searchFormOpen = ref(false);
const tableRef = ref();
const searchFormRef = ref();
const viewProjectModalRef = ref();
const sendMessageModalRef = ref();
const expertViewModalRef = ref();
const searchForm = ref({
  expertName: "", //姓名
  unitName: "", //工作单位
  lastDegree: [], //最后学位
  belongs: [], //统计归属
  title: [], //职称
  source: "", //专家来源
  account: "", //职工号
  subjectId: [], //一级学科
  sexId: "", //性别
  eduLevel: [], //最后学历
  honorTitleId: [], //荣誉称号
  mobile: "", //手机号码
  researchField: "", //研究方向
});
const { loading, pagination, sizeChange, currentChange, tableData, search } = useTable((pagin) =>
  getList({
    pageNum: pagin.pageNum,
    pageSize: pagin.pageSize,
    infoId: id,
    ...searchForm.value,
  })
);
//返回
const toPrevPage = () => {
  router.push("/project/xj/xmps/index");
};
//点击人员姓名
const handleViewPerson = (id) => {
  expertViewModalRef.value.view(id);
};
//查看评审项目
const handleViewProject = (expertId, expertName) => {
  viewProjectModalRef.value.view(expertId, expertName, planId);
};
//发送通知
const handleSendMessage = async (row) => {
  sendMessageModalRef.value.send([
    {
      receiverName: row.expertName,
      receiverNumber: row.email,
    },
  ]);
};
//批量发送通知
const handleSendMessageMul = () => {
  //获取当前选中行
  const selectRows = tableRef.value.getSelectionRows();
  if (!selectRows.length) {
    ElMessage({
      message: "请选择数据！",
      type: "warning",
    });
    return;
  }
  let receivers = [];
  selectRows.forEach((item) => {
    receivers.push({
      receiverName: item.expertName,
      receiverNumber: item.email,
    });
  });
  sendMessageModalRef.value.send(receivers);
};
const resetForm = () => {
  searchFormRef.value.resetFields();
  search();
};
</script>

<style scoped lang="scss"></style>
